<template>
    <view class="bg-content">
        <div v-if="tbOrder" style="padding: 10px; background: white; margin-bottom: 60px;">
            <div class="table" style="vertical-align: middle; margin-bottom: 10px; border-bottom: 1px solid #eeeeee; padding-bottom: 10px;"
                 v-for="(tbOrderGoods, index) of tbOrder.tbOrderGoodsList" :key="tbOrderGoods.id">
                <div class="tr">
                    <div class="td" style="width: 35px;">
                        <image style="width: 35px; height: 35px; display: inline-block;"
                               :src="tbOrderGoods.image ? tbOrderGoods.image + '?imageView2/1/w/300/h/300' : '/pages/sub/sub1-tabs/static/default-image/goods.jpg'"
                               alt="图片加载失败"/>
                    </div>
                    <div class="td" style="padding-left: 10px; width: 100px; padding-top: 10px;">
                        <label style="margin-right: 5px;">描述相符</label>
                    </div>
                    <div class="td" style="padding-left: 10px; padding-top: 10px;">
                        <u-rate active-icon="heart-fill" inactive-icon="heart" :key="tbOrderGoods.id" v-model="tbOrderGoods.grade" min-count="1"></u-rate>
                    </div>
                </div>
                <div class="tr">
                    <div class="td" style="width: 50px; padding-top: 4px;">
                        评价
                    </div>
                    <div class="td">
                        <u-input :key="tbOrderGoods.id" v-model="tbOrderGoods.content" type="textarea" height="40" :border="true"
                                 placeholder="宝贝满足你的期待吗？说说它们的优点和美中不足的地方吧"/>
                    </div>
                </div>
                <div class="tr" style="margin-top: 10px;">
                    <div class="td">
                        <div class="table">
                            <div class="tr">
                                <div class="td" style="width: 70px; padding-top: 4px;">
                                    匿名
                                </div>
                                <div class="td" style="width: 100px;">
                                    <u-switch active-color="red" :key="tbOrderGoods.id" v-model="tbOrderGoods.isAnonymous"
                                              @change="onIsAnonymousChange($event, tbOrderGoods)"></u-switch>
                                </div>
                                <div class="td">
                                    <label style="float: right; color: #dddddd;">你的评价能帮助其他小伙伴单哟</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="custom-bottom-bar">
            <div style="width: 100%;"></div>
            <div style="margin-top: 4px; margin-right: 5px">
                <u-button @click="publish()">发布</u-button>
            </div>
        </div>
    </view>
</template>

<script>

    import {CommonUtil} from "@/dev/core/utils/common.util";
    import {TbGoodsCommentService} from "@/dev/services/tb-goods-comment.service";
    import {TbOrderService} from "@/dev/services/tb-order.service";

    export default {
        data() {
            return {
                tbOrder: null,
            }
        },
        onShow() {
            const _self = this;
            this.tbOrder = this.objParams;
        },
        methods: {
            onIsAnonymousChange($event, tbOrderGoods) {
                console.log($event, tbOrderGoods);
                tbOrderGoods.isAnonymous = !$event;
                // this.$set(tbOrderGoods, "isAnonymous", tbOrderGoods.isAnonymous);
                this.$forceUpdate();
            },
            publish() {
                const _self = this;
                CommonUtil.alert({
                    title: '提示！',
                    content: '确认发布商品评价？',
                    showCancel: true, // 是否显示取消按钮
                    success: function (res) {
                        if (res.cancel) { // 点击取消,默认隐藏弹框
                        } else { // 点击确定
                            _self.submit();
                        }
                    }
                });
            },
            submit() {
                const _self = this;
                let tbGoodsCommentList = [];
                let invalid = false;
                _self.tbOrder.tbOrderGoodsList.forEach(item => {
                    tbGoodsCommentList.push({
                        orderId: item.orderId,
                        orderGoodsId: item.id,
                        goodsId: item.goodsId,
                        parentId: 'root',
                        parentIds: 'root,#',
                        userId: _self.globalVariable.userInfo.id,
                        isAnonymous: !!item.isAnonymous,
                        grade: item.grade,
                        content: item.content
                    });
                    if (!item.content || !item.grade) {
                        invalid = true;
                    }
                });
                if (invalid) {
                    CommonUtil.alert("请简单评价一下商品吧！");
                    return;
                }
                new TbGoodsCommentService().batchSaveTbGoodsComment(tbGoodsCommentList).then(result => {
                    _self.tbOrder.isComment = true;
                    TbOrderService.updateEnableOperation(_self.tbOrder);
                    CommonUtil.toastNavigateBack('评价成功！');
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
</style>
